$(function() {
    var titleDom = $(".title");
    setInterval(scrollFont, 500)

    function scrollFont() {
        titleDom.css('color', randColor());
        var title = titleDom.text();
        var arr = title.split('');
        var first = arr.shift();
        arr.push(first);
        var newTitle = arr.join('');
        titleDom.text(newTitle);
    }
    var container = $(".container");
    $("#btn").on('click', send);
    $(document).on('keyup', function(e) {
        var code = e.keyCode;
        if (code == 13) {
            send();
        }
    })

    function send() {
        var containerWidth = container.width();
        var containerHeight = container.height();
        var bottomHeight = $(".bottom").height();
        var str = $("#text").val();
        var createSpan = $("<span class='active'></span>");
        var randH = Math.floor(Math.random() * (containerHeight - bottomHeight - 50)) + 'px';
        createSpan.text(str);
        $("#text").val('');
        createSpan.css({
            'top': randH,
            'right': -300,
            'color': randColor()
        });
        container.append(createSpan);
        createSpan.animate({
            'right': containerWidth + 300
        }, 8000, 'linear', function() {
            $(this).remove();
        })
    }

    function randColor() {
        var color = "";
        var arr = ['a', 'b', 'c', 'd', 'e', 'f', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * arr.length);
            color += arr[index]
        }
        return "#" + color;
    }
})